<template>
	<detailbox :title="progressType=='2'?'评审':'审核'" @leftclick="close">
		<div slot="right" class="flex_item flex_between">
			<div></div>
			<div class="">
				<el-button type="primary" size="small" @click="submit()">提交</el-button>
				<el-button type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
			</div>
		</div>

		<el-row>
			<el-col :span="16">
				<el-form inline="true" size="small" ref="form" :model="form">
					<el-row v-for="(item,index) in form.detailList" :key="index">
						<basic-container>
							<div class="main_title success_f flex_between">
								<b>文件信息</b>
								<div>

									<el-form-item label="审核结论：" style="margin-bottom: 0;" size="small"
										:prop="`detailList.${index}.check`"
										:rules="{required: true, message: '请选择审核结论', trigger: 'blur'}">
										<el-select v-model="item.check" placeholder="请选择" style="width: 160px;"
											:class="{red_f: item.check=='2'}">
											<el-option label="通过" value="1"></el-option>
											<el-option label="不通过" value="2"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="不通过理由：" v-if="item.check=='2'" style="margin-bottom: 0;"
										size="small" :prop="`detailList.${index}.content`"
										:rules="{required: true, message: '请输入不通过理由', trigger: 'blur'}">
										<el-input placeholder="请输入" v-model="item.content"></el-input>
									</el-form-item>


								</div>
							</div>
							<el-divider></el-divider>
							<div class="mb20">
								<span class="index_num success_bg">1</span>
								<b class="f14">文件属性</b>
							</div>

							<table class="table1 owntable mb20 " border="0" cellspacing="0" cellpadding="1"
								style="width: 100%;">
								<tr>
									<td>文件名称</td>
									<td>{{item.name}}</td>
									<td>文件类型</td>
									<td>{{item.fileType=='0'?'医疗器械':'体系运行'}}</td>
									<td>文件编号</td>
									<td>{{item.fileNumber}}</td>
								</tr>
								<tr>
									<td>文件版本号</td>
									<td>{{item.versionNumber}}</td>
									<td>文件控制状态</td>
									<td>{{item.controlStatus=='0'?'受控':'非受控'}}</td>
									<td>内部/外来文件</td>
									<td>{{item.fileSource=='0'?'内部文件':'外来文件'}}</td>
								</tr>
								<tr>
									<td>页码数量</td>
									<td>{{item.fileNumber}}</td>
									<td>编制部门</td>
									<td colspan="4">{{item.createDeptName}}</td>
								</tr>
							</table>
							<table class="owntable mb20 table1" border="0" cellspacing="0" cellpadding="1"
								style="width: 100%;" v-if="item.isUpgrade">
								<tr>
									<td style="width: 80px;">升版原因</td>
									<td class="white_bg">{{item.reason}}</td>
								</tr>
							</table>
							<div class="mb20">
								<span class="index_num success_bg">2</span>
								<b class="f14">文件</b>
							</div>
							<table class="mb20 owntable table1" border="0" cellspacing="0" cellpadding="1"
								style="width: 100%;">
								<tr>
									<td class="white_bg flex_between">
										<span
											class="pointer main_co">{{(item.templateFile).substring((item.templateFile).lastIndexOf('/') + 1)}}</span>
										<div>
											<span class="gray_f f14">2021-11-01 15:29 预览操作</span>
											<el-button class="ml10" size="mini" v-if="item.isSystemCover=='1'">封面预览
											</el-button>
										</div>

									</td>
								</tr>
							</table>
						</basic-container>
					</el-row>
				</el-form>
			</el-col>
			<el-col :span="8">
				<basic-container>
					<div class="main_title warn_f">
						<b>流程信息</b>
					</div>
					<el-divider></el-divider>
					<div class="mb20"><span class="index_num warn_bg">1</span><b>工作流+签名人员</b></div>
					<table class="owntable wp100">
						<tr>
							<th colspan="2">工作流</th>
							<th>部门</th>
							<th>签名人员</th>
							<th>签名状态</th>
						</tr>
						<tr>
							<td class="white_bg" colspan="2">编制</td>
							<td class="white_bg">{{guifanFilesProcessRecordList[0].createDeptName}}</td>
							<td class="white_bg">{{guifanFilesProcessRecordList[0].createUserName}}</td>
							<td class="white_bg " :class="{success_f:guifanFilesProcessRecordList[0].isSign=='1'}">
								{{guifanFilesProcessRecordList[0].isSign=='1'?'已签名':''}}
							</td>
						</tr>
						<tr>
							<td class="white_bg" colspan="2" :class="{active: progressType==1}">审核</td>
							<td class="white_bg" :class="{active: progressType==1}">
								{{guifanFilesProcessRecordList[1].createDeptName}}
							</td>
							<td class="white_bg" :class="{active: progressType==1}" :colspan="progressType==1?2:1">
								{{guifanFilesProcessRecordList[1].createUserName}}{{progressType==1?'(您正处在这个位置)':''}}
							</td>

							<td class="white_bg" v-if="progressType!=1"
								:class="{success_f:guifanFilesProcessRecordList[1].isSign=='1',active: progressType==1}">
								{{guifanFilesProcessRecordList[1].isSign=='1'?'已签名':''}}
							</td>
						</tr>

						<tr v-for="(item,i) in shenheNum-3" :key="i">
							<td class="white_bg" :rowspan="shenheNum-3" v-if="i==0" :class="{active: progressType==2}">
								评审</td>
							<td class="white_bg"
								:class="{active: progressType==2&&guifanFilesProcessRecordList[i+2].userId==userInfo.userId}">
								{{i+1}}
							</td>
							<td class="white_bg"
								:class="{active: progressType==2&&guifanFilesProcessRecordList[i+2].userId==userInfo.userId}">
								{{guifanFilesProcessRecordList[i+2].createDeptName}}
							</td>
							<td class="white_bg"
								:colspan="progressType==2&&guifanFilesProcessRecordList[i+2].userId==userInfo.userId?2:1"
								:class="{active: progressType==2&&guifanFilesProcessRecordList[i+2].userId==userInfo.userId}">
								{{guifanFilesProcessRecordList[i+2].createUserName}}
								{{progressType==2&&guifanFilesProcessRecordList[i+2].userId==userInfo.userId?'(您正处在这个位置)':''}}
							</td>
							<td class="white_bg "
								v-if="progressType!=2||guifanFilesProcessRecordList[i+2].userId!=userInfo.userId"
								:class="{success_f:guifanFilesProcessRecordList[i+2].isSign=='1'}">
								{{guifanFilesProcessRecordList[i+2].isSign=='1'?'已签名':''}}
							</td>
						</tr>
						<tr>
							<td class="white_bg" colspan="2">批准</td>
							<td class="white_bg">{{guifanFilesProcessRecordList[shenheNum-1].createDeptName}}</td>
							<td class="white_bg">{{guifanFilesProcessRecordList[shenheNum-1].createUserName}}</td>
							<td class="white_bg "
								:class="{success_f:guifanFilesProcessRecordList[shenheNum-1].isSign=='1'}">
								{{guifanFilesProcessRecordList[shenheNum-1].isSign=='1'?'已签名':''}}
							</td>
						</tr>
					</table>
				</basic-container>
			</el-col>
		</el-row>

		 <steps ref="steps" @close="success()" :checkItem="form"></steps>
		<showhistory ref="showhistory" :processStatus="form.detailList[0].processStatus"
			:guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
	</detailbox>
</template>

<script>
	import {
		getdealDetail,
		deal
	} from "@/api/myapi/tixiwenjian"
	export default {
		props: {
			progressType: '',
			groupNumber: '',
		},
		data() {
			return {
				radio: '',
				nowdate: '',
				checked: false,
				showpreview: false,
				tableData: [],
				useTemp: false,
				shenheNum: 0,
				options: [],
				guifanFilesProcessRecordList: [],
				form: {
					detailList: []
				}

			}
		},
		mounted() {
			this.getdealDetail()
		},
		methods: {
			getdealDetail() {
				getdealDetail({
					groupNumber: this.groupNumber
				}).then(({
					data
				}) => {
					if (data.success) {
						this.form.detailList = [...data.data]
						this.form.detailList.forEach(item => {
							this.$set(item, 'check', '')
							this.$set(item, 'content', '')
						})
						this.guifanFilesProcessRecordList = data.data[0].guifanFilesProcessRecordList
						this.shenheNum = data.data[0].guifanFilesProcessRecordList.length
					}
				})
			},
			close() {
				this.$emit('close')
			},
			success() {
				this.$emit('close')
				this.$emit('success')
			},
			submit() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						let data = []
						for (let i = 0; i < this.form.detailList.length; i++) {
							let item = this.form.detailList[i]
							data.push({
								id: item.id,
								checkStatus: item.check||'0',
								type: this.progressType,
								content: item.content
							})
						}
						deal({systemGuifanFilesProcessList:JSON.stringify(data)}).then(({data})=>{
							if(data.success){
								// this.$message.success('提交成功')
								this.nowdate = this.dateFormat(new Date())
								this.openDialg('steps')
							}
						})
						
					} else {
						return false;
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.active {
		background-color: #E6F1FC !important;
		color: #126BC9 !important;
	}

	.red_f /deep/ .el-input__inner {
		color: #FF0000
	}
</style>
